<template>
<!--  下面只能有一个大的div-->
  <div>
<!--    行-->
    <el-row :gutter="30">
      <el-col :span="4">
        <el-button type="primary" @click="tianjiaTanChuang()">发布优惠券</el-button>
      </el-col>
    </el-row>
    <el-row :gutter="30">
      <el-col :span="24" style="margin:20px 0px 0px 0px;">
        <!-- 表格展示数据 -->
        <el-table :data="couponData" border style="width:1420px;">
          <el-table-column fixed prop="id" label="序号" width="60" align="center">
          </el-table-column>
          <el-table-column prop="title" label="优惠券名称" width="100" align="center">
          </el-table-column>
          <el-table-column prop="withAmount" label="满减条件" width="80" align="center">
          </el-table-column>
          <el-table-column prop="usedAmount" label="优惠券面额" width="100" align="center">
          </el-table-column>
          <el-table-column prop="withSpecial" label="可用商品" width="80" align="center">
          </el-table-column>
          <el-table-column prop="status" label="是否发放" width="80" align="center">
            <template slot-scope="scope">
              <!--switch 开关 组件-->
              <el-switch
                  @change="alterSwitch(scope.row)"
                  :active-value="true"
                  :inactive-value="false"
                  v-model="scope.row.status"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
              </el-switch>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" width="160" align="center">
          </el-table-column>
          <el-table-column prop="deadlineTime" label="过期时间" width="160" align="center">
          </el-table-column>
          <el-table-column label="创建人" width="80">
            <template slot-scope="scope">
              {{ scope.row.hfStaff.name }}
            </template>
          </el-table-column>
          <el-table-column prop="quota" label="发行总数" width="80" align="center">
          </el-table-column>
          <el-table-column prop="residualCount" label="剩余数量" width="80" align="center">
          </el-table-column>
          <el-table-column fixed="right" label="优惠券发放使用记录" width="340px">
            <template slot-scope="scope">
              <!-- 这块下面是修改按钮 -->
              <el-button icon="el-icon-edit" type="primary" @click="updateCouponById(scope.row)">修改
              </el-button>
              <!-- 这块下面是发放记录按钮 -->
              <el-button type="primary" @click="queryReceiveRecord(scope.row.id)">发放记录
              </el-button>
              <!-- 这块下面是使用记录按钮 -->
              <el-button type="primary" @click="queryUseRecord(scope.row.id)">使用记录
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!--下面都是弹出层-->
    <div>
      <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible" center width="37%">
        <el-form :model="form">
          <el-form-item label="优惠券标题" :label-width="formLabelWidth">
            <!--autocomplete="off" 禁止自动补全  -->
            <el-col :span="18">
              <el-input v-model="form.title" autocomplete="off"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="满减条件" :label-width="formLabelWidth">
            <el-col :span="18">
              <el-input v-model="form.withAmount" autocomplete="off"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="优惠券金额" :label-width="formLabelWidth">
            <el-col :span="18">
              <el-input v-model="form.usedAmount" autocomplete="off"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="可用商品" :label-width="formLabelWidth">
            <el-col :span="18">
              <el-input v-model="form.withSpecial" autocomplete="off"></el-input>
            </el-col>
          </el-form-item>
          <el-form-item label="是否发放" :label-width="formLabelWidth">

            <el-col :span="18">
              <el-switch
                  v-model="form.status"
                  active-color="#13ce66"
                  inactive-color="#ff4949">
              </el-switch>
            </el-col>

          </el-form-item>
          <el-form-item label="过期时间" :label-width="formLabelWidth">
            <el-col :span="18">
              <el-date-picker
                  v-model="form.deadlineTime"
                  type="datetime"
                  placeholder="请选择过期时间">
              </el-date-picker>
            </el-col>
          </el-form-item>
          <el-form-item label="发行数量" :label-width="formLabelWidth">
            <el-col :span="18">
              <div class="block">
                <el-slider
                    v-model="form.quota"
                    show-input
                    :max="500">
                </el-slider>
              </div>
            </el-col>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveCoupon()">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <el-dialog title="优惠券领取记录" :visible.sync="dialogTableVisible">
      <el-table :data="receiveRecordData">
        <el-table-column property="id" label="序号" width="150"></el-table-column>
        <el-table-column label="所属用户" width="200">
          <template slot-scope="scope">
            {{ scope.row.hfUser.username }}
          </template>
        </el-table-column>
        <el-table-column label="优惠券标题">
          <template slot-scope="scope">
            {{ scope.row.hfCoupon.title }}
          </template>
        </el-table-column>
        <el-table-column property="drawTime" label="优惠券领取时间"></el-table-column>
        <el-table-column property="address" label="优惠券使用状态"></el-table-column>
      </el-table>
    </el-dialog>
    <el-dialog title="优惠券使用记录" :visible.sync="dialogTable2Visible">
      <el-table :data="useRecordData">
        <el-table-column property="id" label="序号" width="80"></el-table-column>
        <el-table-column property="name" label="用户" width="140">
          <template slot-scope="scope">
            {{ scope.row.hfUser.username }}
          </template>
        </el-table-column>
        <el-table-column label="优惠券标题" width="140">
          <template slot-scope="scope">
            {{ scope.row.hfCoupon.title }}
          </template>
        </el-table-column>
        <el-table-column property="useTime" label="使用时间" width="200"></el-table-column>
        <el-table-column property="amount" label="使用金额"></el-table-column>
        <el-table-column property="oid" label="交易订单号"></el-table-column>
      </el-table>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "Coupon.vue",
  data() {
    return {
      couponData: [],//所有优惠券信息
      dialogTitle: '',//弹出框标题
      dialogFormVisible: false,//弹出层开关 默认设置为不弹出
      // 定义表单对象
      //给表单项初始值
      form: {
        id: 0,
        title: '',
        withAmount: '',
        usedAmount: '',
        withSpecial: 0,
        status: '',
        createTime:'',
        deadlineTime: '',
        founder: '',
        quota: 0,
        residualCount: '',
      },
      formLabelWidth: '140px',//宽度
      dialogTableVisible: false,//领取记录弹出框开关,默认为假
      dialogTable2Visible: false,//使用记录弹出框开关,默认为假
      receiveRecordData: [],//领取记录数据
      useRecordData: [],//使用记录数据
    };
  },
  mounted() {
    this.getAllCoupon();
  },
  methods: {
    // 全查方法
    getAllCoupon() {
      //请求方式为get
      this.$axios.get("http://localhost:9527/backstagesupporter/coupon/getAllCoupon").then(res => {//获取返回结果
        this.couponData = res.data.data;
        console.log(this.couponData)
      }).catch(e => {
        console.log(e)
      })
    },
    //添加优惠券的弹窗,为了清除form的值,所以又设置了一下这里
    tianjiaTanChuang() {
      this.form = {} //清空form的值
      this.dialogFormVisible = true //将弹出层设置为弹出
      this.dialogTitle = '发布优惠券' //修改弹出框标题
    },
    //查看领取记录方法
    queryReceiveRecord(id) {
      this.receiveRecordData = [] //先清空数据的值
      this.dialogTableVisible = true//打开弹出层
      //请求方式为get
      this.$axios.get("http://localhost:9527/backstagesupporter/coupon/getAllReceiveRecordByCoupon", {
        params: {
          id: id
        }
      }).then(res => {//获取返回结果
        this.receiveRecordData = res.data.data;
        console.log(this.receiveRecordData)
      }).catch(e => {
        console.log(e)
      })
    },
    //查看使用记录方法
    queryUseRecord(id) {
      this.useRecordData = [] //先清空数据的值
      this.dialogTable2Visible = true//打开弹出层
      //请求方式为get
      this.$axios.get("http://localhost:9527/backstagesupporter/coupon/getAllUseRecordByCoupon", {
        params: {
          id: id
        }
      }).then(res => {//获取返回结果
        this.useRecordData = res.data.data;
        console.log(this.useRecordData)
      }).catch(e => {
        console.log(e)
      })
    },
    //保存优惠券方法(弹出和修改都用这个方法)
    saveCoupon() {
      //如果有id值，那就修改
      if(this.form.id != null){
        //alert("进的修改")
        //请求方式为post
        this.$axios.post("http://localhost:9527/backstagesupporter/coupon/updateCoupon",
            {
              id: this.form.id,
              title: this.form.title,
              withAmount: this.form.withAmount,
              usedAmount: this.form.usedAmount,
              withSpecial: this.form.withSpecial,
              status: this.form.status,
              // deadlineTime: this.form.deadlineTime,
              quota: this.form.quota
            }).then(res => {//获取返回结果
          this.updateSuccess()//修改成功的通知方法
          this.dialogFormVisible = false//关闭弹窗
          this.form = {}//清空表单
          this.couponData = res.data.data;//更新数据
          console.log(this.couponData)
        })
      }else{
        //如果没有id值就进的添加
        //alert("进的添加")
        //请求方式为post
        this.$axios.post("http://localhost:9527/backstagesupporter/coupon/saveCoupon",
            {
              title: this.form.title,
              withAmount: this.form.withAmount,
              usedAmount: this.form.usedAmount,
              withSpecial: this.form.withSpecial,
              status: this.form.status,
              // deadlineTime: this.form.deadlineTime,
              quota: this.form.quota
            }).then(res => {//获取返回结果
          this.updateSuccess()//修改成功的通知方法
          this.dialogFormVisible = false//关闭弹窗
          this.form = {}//清空表单
          this.couponData = res.data.data;//更新数据
          console.log(this.couponData)
        })
      }
    },
    //开关方法
    alterSwitch(row){
      console.log(row)
      //请求方式为post
      this.$axios.post("http://localhost:9527/backstagesupporter/coupon/alterSwitch",
          {
            id:row.id,
            status:row.status
          })
    },
    //修改优惠券模块
    updateCouponById(row){
      this.form = row //将这一行的值赋给弹出层
      this.dialogFormVisible = true//将弹出层设置为弹出
      this.dialogTitle = '修改优惠券信息' //修改弹出框标题
    },
    // 修改成功的通知方法
    updateSuccess() {
      this.$message({
        message: '恭喜你，修改成功！！！',
        type: 'success'//类型设置为成功样式
      });
    },
  }
}
</script>

<style scoped>

</style>
